<template>
 
 <div>
   <!-- v-on事件绑定 -->
  <h1>加加减减 {{num}} </h1>
  <!-- 绑定点击事件 -->
  <!-- <button v-on:click="jia" >+++</button>
  <button v-on:click="jian" >---</button> -->
  <!-- 可以直接传递参数 -->
  <button v-on:click="jia(10)" >+++</button>
  <!-- 简写@ -->
  <button @click="jian(5)" >---</button>
 </div>
</template>

<script>
// 默认导出一个对象
export default {

  data(){
  
    return {
      num :0
    }
  },
  // 事件处理函数写在methods中
  // Vue 开发的特点: 数据驱动视图
  // 数据修改后, 用到该数据的视图层会自动更新
 // 如何在 methods 中的函数里操作 data 中的数据呢?
 // 只要在 methods 中的函数, 想访问 data 中的数据, 只需要在前面加上 this. 即可
  methods:{
    /* jia(){
      // 通过this可以拿到data中的变量
      this.num++
    },
    jian(){
      this.num--
    } */

    
      jia(n){
      // 通过this可以拿到data中的变量
      this.num+=n
    },
    jian(n){
      this.num-=n
    }
  }
}


</script>

<style>

</style>
